利用js复制文本框里面的内容到剪切板，并且隐藏文本框

最新推荐文章于 2024-03-13 10:53:36 发布

原飞木

最新推荐文章于 2024-03-13 10:53:36 发布

阅读量3.2k

点赞数 1

分类专栏：前端文章标签： js 复制文本框里面的内容到剪切板隐藏文本框隐藏文本框

本文链接：https://blog.csdn.net/BushQiang/article/details/79773898

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在页面中有时需要用到复制这个功能，提高用户体验。而内容是放在div中展示的不可以让用户修改。就相当于页面中有两个重复的内容，一个是用才展示给用户的，一个是用来复制的，而这个复制的用户看不到内容。

代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
.btnSel {
	border: 0px;
	border-radius: 5px;
	background-color: #9f9fff;
	color: white;
}
.contentsCls {
	border: 0px;
	width: 1px;
	height: 1px;
	resize: none;
	
}
</style>

<body>
	<input class='btnSel' id="btnId" style='font-size: 11px;' type='button'
		onClick='jsCopy();' value='复制数据' />
		<!-- <div id="id1">
		asdf
		asdf
		</div> -->
	<div>
		<textarea id="contents" class="contentsCls"
			style="border: 0px; width: 0px; height: 0px; resize: none;" col="1"
			row="1" readonly="readonly">
3
1.1 1.01
-9 0.98
333 78.888</textarea>
	</div>

</body>
<script type="text/javascript">
	var flag = 1;
	function jsCopy() {
		/* var a=document.getElementById("id1").innerText;
		document.getElementById("contents").value = a; */
		var e = document.getElementById("contents"); //对象是contents   
		e.select(); //选择对象   
		tag = document.execCommand("Copy"); //执行浏览器复制命令  
		if (tag) {
			document.getElementById("btnId").value = "复制成功";
		}
		if (flag == 1) {
			flag = 2;
			document.getElementsByClassName("btnSel")[0].style.backgroundColor = "#00CC66";
		} else {
			flag = 1;
			document.getElementsByClassName("btnSel")[0].style.backgroundColor = "#9f9fff";
		}
	}
</script>

</html>

原飞木

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用js复制文本框里面的内容到剪切板，并且隐藏文本框

在页面中有时需要用到复制这个功能，提高用户体验。而内容是放在div中展示的不可以让用户修改。就相当于页面中有两个重复的内容，一个是用才展示给用户的，一个是用来复制的，而这个复制的用户看不到内容。代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;&l..
复制链接

扫一扫